<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq</title>
    <style>
        .color{
            color: red;
        }

    </style>
<!--    国内的 jQuery CDN 在线引入-->
<!--    <script src="https://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js"> </script>-->

<!--    本地的 jQuery 引入-->
    <script src="min_jq/min.js"></script>
</head>
<body>
    <div id="tmp">Help Palestine</div>
    <button id="btn">点击我更换内容</button>
    <label>
        <input type="checkbox" checked value="married"  id="box">婚否
    </label>
</body>
    <script>
        object_a=$("#tmp")
        // 输出jq对象
        console.log(object_a)
        // 输出原生对象
        console.log(document.getElementById("tmp"))
        // 原生转换成Jq对象
        console.log($(document.getElementById("tmp")))
        // jq对象转换成原生对象
        console.log(object_a[0])
        // 修改页面的innerHtml
        document.getElementById("btn").onclick=function (){
            object_a.html("<b>欢迎来到情色九月天</b>")
        }
        //  操作标签属性 两个形参表示设置,左边写属性名称,右边写值
        object_a.attr("class","color")
        // 只写属性名称表示查询
        console.log(object_a.attr("id"))

        object_b=$("#box")
        // 查看是否选中,如果选中返回checked,若未选中则返回undefined
        console.log(object_b.attr("checked"))
        // 查看是否选中,如果选中返回ture,若未选中则返回false
        object_b[0].onclick=function (){
            if (object_b.prop("checked")){
                object_b.remove("checked");}
            else{
                object_b.add("checked")
            }
            console.log(object_b.prop("checked"))
        }

    </script>
</html>